<template>
	<view>
		<view class="padding-sm">
			<swiper style="height: 520rpx;">
				<swiper-item v-for="item in userImages" :key="item.id">
					<u-image width="710upx" height="520upx" style="display: inline-block;margin-right: 6upx;"
						:src="item">
					</u-image>
					<!-- <image :src = "item"></image> -->
				</swiper-item>
			</swiper>
			<!-- <u-swiper :list="userImages"></u-swiper> -->


			<view class="margin-top-sm padding flex justify-between bg">
				<u-avatar :src="avr" mode="square" @click="goUserCenter"></u-avatar>
				<view class="flex-sub margin-left-sm">
					<view class="text-white text-lg">{{nick}}</view>
					<view class="margin-top-xs">
						<view
							style="width: 16upx;height: 16upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
						</view>
						<text class="margin-left-xs" style="color: #CCCCCC;">在线</text>
						<text class="margin-left-sm" style="color: #CCCCCC;">成都市</text>
					</view>
				</view>
			</view>
			<view class="margin-top-sm padding bg">
				<view class="flex justify-between">
					<view>
						<text class="text-white">{{nick}}</text>
						<view class="round margin-left-xs"
							style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;"
							v-if="gender=='女'">
							<u-icon name="woman" color="#FF659A" size="24"></u-icon>
							24
						</view>
						<view class="round margin-left-xs"
							style="display: inline-block;background-color: #3c6aa1; color: #69a5ff;padding: 2upx 8upx;"
							v-if="gender=='男'">
							<u-icon name="man" color="#69a5ff" size="24"></u-icon>
							24
						</view>
					</view>
					<view class="text-white"><text style="color: #FF6F1B;">{{price}}币 </text> /局</view>
				</view>
				<view class="flex margin-top-sm">
					<view class="" style="color: #3390FF;background: rgba(51,143,255,0.3);padding: 0 8upx;">
						评分{{goodsScore}}
					</view>
					<view class="margin-left-sm"
						style="color: #3390FF;background: rgba(51,143,255,0.3);padding: 0 8upx;" v-if="">
						{{saleNum}}人下单
					</view>
				</view>
				<view class="margin-tb">
					<view class="flex round justify-between" style="background-color: #24416F;padding: 0;width: 170upx;"
						@tap="changePlayState">
						<u-image
							:src="audioPlay?'../../../static/images/index/audio_play.png':'../../../static/images/index/stop.png'"
							width="38upx" height="38upx" mode="">
						</u-image>
						<u-image
							:src="audioPlay?'../../../static/images/index/audio_active.gif':'../../../static/images/index/audio.png'"
							width="42upx" height="27upx" mode="" style="line-height: 44upx;"></u-image>
						<view class="text-white padding-right" style="line-height: 38upx;">8S</view>
					</view>
				</view>
				<u-line color="#36374A" :hair-line="false" />
				<view class="flex margin-top-sm align-center">
					<image :src='goods.goodsCategory.img' style="width: 50rpx;height: 50rpx;margin-right: 10rpx;">
					</image>
					<view style="color: #ffffff;">{{goods.goodsCategory.name}}</view>
				</view>
				<view class="flex margin-top-sm">
					<view style="color: #B8B8CC;">{{signature}}</view>
				</view>
			</view>

			<view class="margin-top-sm padding bg" style="height: 300upx;">
				<view  class="text-lg margin-bottom-sm" style="color: white;">实力证明：</view>
				<swiper style="height: 300rpx;">
					<swiper-item v-for="item in goods.goodsImgs" :key="item.id">
						<u-image width="300upx" height="200upx" style="display: inline-block;margin-right: 6upx;" mode="aspectFill"
							:src="item.url" @click="imgPreview(goods.goodsImgs)">
						</u-image>
						<!-- <image :src = "item"></image> -->
					</swiper-item>
				</swiper>
				<!-- <image :src='goods.goodsCategory.img' style="width: 50rpx;height: 50rpx;margin-right: 10rpx;"></image> -->
			</view>

			<view class="margin-top-sm padding bg text-white" style="padding-bottom: 200rpx">
				<view class="text-lg">用户评论</view>

				<view class="margin-top-sm" v-for="(item,i) in comments" :key="i">
					<view class="flex justify-between">
						<u-avatar :src="item.user.avr" size="48"></u-avatar>
						<view class="flex-sub margin-left-sm" style="line-height: 46upx;">{{item.user.nick}}</view>
						<view class="flex">
							<u-image src="../../../static/images/index/praise.png" width="22upx" height="24upx" mode=""
								style="line-height: 46upx;"></u-image>
							<view class="margin-left-xs">满意</view>
						</view>
					</view>
					<view class="margin-top-sm">
						{{item.comment}}
					</view>
				</view>
			</view>
		</view>
		<view class="text-white flex justify-between cu-bar foot bg padding-lr">

			<!-- 已关注 -->
			<view v-if="isCareUser" style="text-align: center;" @click="cancelCare">
				<uni-icons type="heart-filled" color="#ff4a4d" size="30" style="margin: 0;padding: 0;"></uni-icons>
				<view style="font-size: 22upx;width: 80upx;">已关注</view>
			</view>
			<!-- 未关注 -->
			<view v-else style="text-align: center;" @click="careUser">
				<uni-icons type="heart" color="#e5e5e5" size="30" style="margin: 0;padding: 0;"></uni-icons>
				<view style="font-size: 22upx;width: 80upx;">关注</view>
			</view>


			<view @click="goMsg">
				<uni-icons type="chatbubble" color="#e5e5e5" size="30" style="margin: 0;padding: 0;"></uni-icons>
				<view style="font-size: 22upx;">聊天</view>
			</view>
			<view class="">
				<u-button :custom-style="customStyle" @click="goNav()" shape="circle" :hair-line="false">下单</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					width: '400upx',
					color: '#FFFFFF',
					background: "#2087fe",
					border: 0
				},
				goods: {},
				// 用户头像
				avr: "",
				// 昵称
				nick: "",
				price: 0,
				goodsScore: 0,
				saleNum: 0,
				description: "",
				signature: "",
				comments: [],
				goodsID: 0,
				userImages: [],
				gender: "",
				voice: "",
				innerAudioContext: {},
				audioPlay: false,
				id: 0,
				loginUserId: 0,
				isCareUser: false
			}
		},
		onLoad(opition) {
			this.goodsID = opition.id;
		},
		onShow(opition) {
			this.loginUserId = uni.getStorageSync('userId');
			//console.log(opition.id);
			this.$myRequest({
				url: "/goods/showGoodsDetail",
				data: {
					id: this.goodsID,
				},
				method: "post",
			}).then(r => {
				console.log(r.data.data);
				let result = r.data.data;
				this.goods = result;
				this.avr = r.data.data.user.avr;
				this.nick = result.user.nick;
				this.price = result.money;
				this.goodsScore = result.goodsScore;
				this.saleNum = result.saleNum;
				this.description = result.description;
				this.signature = result.user.signature;
				this.comments = result.goodsComments;
				this.userImages = result.user.userImages;
				this.gender = result.user.gender;
				this.voice = result.voice;
				this.id = result.user.id;
				// 录音初始化
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				this.innerAudioContext = innerAudioContext;
				this.getIsCareUser();
			})
		},
		methods: {
			goNav() {
				uni.navigateTo({
					url: "/pages/index/game/orderDet?id=" + this.goodsID
				})
			},
			goUserCenter(){
				if(this.id!=this.loginUserId){
					console.log("跳转他人主页")
					uni.navigateTo({
						url: "/pages/index/game/user?id=" + this.id
					})
				}else{
					console.log("跳转个人主页")
					uni.switchTab({
						url: "/pages/my/index"
					})
				}
				
			},
			goMsg() {
				console.log(this.id);
				uni.navigateTo({
					url: "/pages/msg/im?id=" + this.id,
				})
				if (this.id == uni.getStorageSync("userId")) {
					return uni.showToast({
						title: "不能与自己聊天",
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "/pages/msg/im?id=" + this.id,
					})
				}
			},
			// 播放录音
			changePlayState() {
				this.innerAudioContext.src = this.voice;
				this.audioPlay = !this.audioPlay
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				this.innerAudioContext.onPause(() => {
					// 暂停监听
					console.log('暂停播放!');
					this.audioPlay = false
				});
				this.innerAudioContext.onEnded(() => {
					// 结束播放监听
					console.log('播放结束!');
					this.audioPlay = false;
				})
			},
			getIsCareUser() {
				this.$myRequest({
					url: '/user/careUser/' + this.loginUserId + '/' + this.id
				}).then(r => {
					console.log(r)
					if (r.data.code == 200) {
						this.isCareUser = r.data.data
					}
				})
			},
			// 关注
			careUser(moment) {
				if (this.loginUserId == this.id) {
					uni.showToast({
						title: '不能关注自己',
						icon: "none"
					})
					return;
				}

				this.$myRequest({
					url: '/user/careSomebody/' + this.loginUserId + '/' + this.id
				}).then(r => {
					if (r.data.code == 200) {
						this.isCareUser = true;
						uni.showToast({
							title: '关注成功',
							icon: "none"
						})
					}
				})
			},
			// 取关
			cancelCare(moment) {
				this.$myRequest({
					url: '/user/cancelCare/' + this.loginUserId + '/' + this.id
				}).then(r => {
					this.isCareUser = false;
					if (r.data.code == 200) {
						uni.showToast({
							title: '取关成功',
							icon: "none"
						})
					}
				})
			},
			// 点击图片查看大图
			imgPreview(imgs) {
				let urls = [];
				for (let img of imgs) {
					urls.push(img.url);
				}
				console.log("查看大图", imgs)
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urls
				})
			},
		}
	}
</script>

<style>
</style>
